tags: iThome 鐵人賽 30天

先接續昨天卡片製作，還有圖片/卡片大小沒調整好，另外標題也要設定成最多兩行，最後要給每個卡片一個具有識別性的連結，點進去播放後能夠分辨是哪部影片，就來看看怎麼調整吧！

卡片調整

圖片大小

先來看看我們取得的影片縮圖的大小比例，依照昨天的API後面是用hqdefault.jpg取得的圖片大小是480×360，我不打算改變圖片的比例也不想要重新調整大小，所以就把卡片的寬度設定為480，高度設為360吧！

import React from 'react'
import { Card, CardMedia, CardContent, Typography } from '@mui/material'

export default function VideoCard(props) {
  const {v, title} = props

  return (
    <Card sx={{ maxWidth: 480 }}>
      <CardMedia
        component="img"
        image={`https://img.youtube.com/vi/${v}/hqdefault.jpg`}
        alt="green iguana"
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          {title}
        </Typography>
      </CardContent>
    </Card>
  )
}

maxWidth為最大寬度，設定為480，而原本CardMedia參數裡面有個height，這裡把它拿掉，讓他依照圖片原本的比例自動縮放。

文字最多兩行

再來來解決文字最多兩行，並把多餘的文字以...表示，這裡解決方法是使用CSS來解決，CSS寫法如下，並可以自行運用調整行數。

以最多兩行為範例 (src/App.css)：

.twoline {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; // 可自行設定行數
    -webkit-box-orient: vertical;
    white-space: normal;
}

寫好CSS之後就套用在Title上吧 (/src/component/VideoCard.jsx)：

import React from 'react'
import { Card, CardMedia, CardContent, Typography } from '@mui/material'

export default function VideoCard(props) {
  const {v, title} = props

  return (
    <Card sx={{ maxWidth: 480 }}>
      <CardMedia
        component="img"
        // height="360"
        image={`https://img.youtube.com/vi/${v}/hqdefault.jpg`}
        alt="green iguana"
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div" className='twoline'>
          {title}
        </Typography>
      </CardContent>
    </Card>
  )
}

最終效果：

可以看到成功把多餘的文字去除掉了！

React Route Dom：Link

昨天天有講到元件重複 (Reuse) 使用的概念，今天稍微示範一下！

一樣使用同一個卡片，但傳入不同的v與title，看看會發生什麼事吧！

import './App.css';
import Header from './components/Header'
import React from 'react'
import VideoCard from './components/VideoCard';

function App() {
  return (
    <div className="App">
      <Header title="影片標記系統" />
      <VideoCard
        v={"Ga22mpTDS6A"}
        title={"東京版《Joe是要對決》日幣30000元的奢華壽喜燒對決日幣600元的平價壽喜燒！Ep127@徐海莉 Hailey@流川莉蘿 Rilo ch."}
      />
      <VideoCard
        v={"SxQgIJ3rQ3c"}
        title={"NEAL對決秋天的王者李宰赫！Royal Roader再度誕生！個人賽決賽SET 2《2022 跑跑卡丁車聯賽 S2》"}
      />
    </div>
  );
}

export default App;

得到的結果：

值得注意的是，雖然重複使用相同的Component，但兩個Component之間基本上是不會互相受到影響的，可以把它當成兩個獨立且不一樣的個體。

連結設定

之後要來設定每個卡片都讓它導到不同的連結，作為影片觀看的頁面，而我預想的連結如下：

/watch?v=${v}

跟YouTube的影片連結路徑是相同的，也方便一眼看出連結的定義

react-router-dom: Link

react-router-dom就是處理網頁SPA (Single Page Application) 的重要套件，可以在不重新載入網頁的情況下切換網址並變更網頁內容，有興趣的話可以搜尋與比較與react-dom的差別。

首先就先來安裝套件吧：

npm i react-router-dom

安裝完套件後，這裡要先介紹的是Link，Link就像是HTML的a標籤，用來導向另一個網址，更改目前的Location。

要讓react-routes-dom生效首先要在DOM的起始處加上BrowserRouter，表示以下的DOM節點都可以由react-routes-dom來控制。

/src/index.js：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from "react-router-dom"; // 加上這裡

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router> {/* 加上這裡 */}
      <App />
    </Router> {/* 加上這裡 */}
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

這樣就可以讓其它Link、Route等等生效了！

之後在卡片的最外層加上Link，包覆整個卡片：

import React from 'react'
import { Card, CardMedia, CardContent, Typography } from '@mui/material'
import { Link } from 'react-router-dom' // 導入Link

export default function VideoCard(props) {
  const { v, title } = props

  return (
    <Link to={`/watch?v=${v}`}>
      <Card sx={{ maxWidth: 480 }}>
        <CardMedia
          component="img"
          // height="360"
          image={`https://img.youtube.com/vi/${v}/hqdefault.jpg`}
          alt="green iguana"
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="div" className='twoline'>
            {title}
          </Typography>
        </CardContent>
      </Card>
    </Link>

  )
}

Link最基本的參數就是to，to所指定的位置就是要導向的網址，所以加上/watch?v=${v}來把指定的v導過去，設定完成後點擊卡片就會發現網址變更了，代表設定成功！

點擊後變更網址：

後記

先恭喜阿爆奪冠啦！昨天看比賽真的是特別的興奮，也為爆哥感到開心，真的是非常精采！

然後之後就是先整理卡片的排版，再來介紹實作Route吧！

對資安或Mapbox有興趣的話也可以觀看我們團隊的鐵人發文喔~

• 資安新人30
• 打造你的主題地圖！Mapbox 也可以！(ft. React)